<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue.js Modal Example</title>
    <script src="../dist/vue.js"></script>
    <link rel="stylesheet" href="modal.css">
</head>

<body>
    <!-- template for the modal component -->
    <script type="x/template" id="modal-template">
        <div class="modal-mask" v-show="show" transition="modal">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                            default header
                        </slot>
                    </div>

                    <div class="modal-body">
                        <slot name="body">
                            default body
                        </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="show = false">
                                OK
                            </button>
                        </slot>
                    </div>
                    
                </div>
            </div>
        </div>
    </script>
    <script>
    // register modal component
    Vue.component('modal', {
        template: '#modal-template',
        props: {
            show: {
                type: Boolean,
                required: true,
                twoWay: true
            }
        }
    })
    </script>
    <!-- app -->
    <div id="app">
        <button id="show-modal" @click="showModal = true">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal :show.sync="showModal">
            <!--
          you can use custom content here to overwrite
          default content
        -->
            <h3 slot="header">custom header</h3>
        </modal>
    </div>
    <script>
    // start app
    new Vue({
        el: '#app',
        data: {
            showModal: false
        }
    })
    </script>
</body>

</html>
